<template>
    <div>
        <div class="container">
            <el-main>
                <el-form ref="memberAddressFormRef" :rules="memberAddressFormRules" :model="memberAddressForm" :label-width="formLabelWidth">
                    <el-form-item label="ID" prop="id" v-if="false">
                        <el-input v-model="memberAddressForm.id" c/>
                    </el-form-item>
					<!-- 常规信息 -->
					<el-form-item label="联系人姓名" prop="linkman">
                        <el-input v-model="memberAddressForm.linkman" clearable class="handle-input mr10" maxlength="30" show-word-limit/>
                    </el-form-item>
					<el-form-item label="联系人手机号" prop="phoneNumber">
                        <el-input v-model="memberAddressForm.phoneNumber" clearable class="handle-input mr10" maxlength="11" show-word-limit/>
                    </el-form-item>
					<el-form-item label="邮政编码" prop="postalCode">
                        <el-input v-model="memberAddressForm.postalCode" clearable class="handle-input mr10" maxlength="6" show-word-limit/>
                    </el-form-item>
					<el-form-item label="收件地址选择">
                        <el-input v-model="memberAddressForm.strProvCityAreaCode" clearable class="handle-input mr10" v-if="false"/>
                        <el-cascader v-model="provinceOptionVal"
                                @focus="func_loadProvinceOptions" @change="func_setProvince"
                                :options="provinceOptions" :props="provinceOptionProps" placeholder="所在城市" clearable size="medium" style="width:350px" />
                    </el-form-item>
					<el-form-item label="详细地址" prop="detailAddress">
                        <el-input type="textarea" rows="5" v-model="memberAddressForm.detailAddress" clearable class="handle-input mr10" maxlength="100" show-word-limit/>
                    </el-form-item>
					<el-form-item label="默认地址" prop="type">
                        <el-switch v-model="memberAddressForm.type" class="handle-switch mr40" placeholder="设为默认" :active-value="1" :inactive-value="0" active-text="有效" inactive-text="无效" />
                    </el-form-item>
                </el-form>
            </el-main>
			<el-footer>
				<el-button type="primary" @click="func_onSubmit" plain>保存数据</el-button>
				<el-button type="success" @click="func_onReset" plain>重置表单</el-button>
				<el-button @click="func_closeDialog" plain>取 消</el-button>
			</el-footer>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findMemberAddressInfoById, addMemberAddress, saveMemberAddress, } from "../../../../api/hairmanager/memberAddress";

import { loadProvTrees, } from "../../../../api/dict";

import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../../api/CommonErrorMessage.js";

export default {
    name: "memberAddressForm",
	props:{
		selectValue: Object
	},
	emits: ["MemberAddressData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");
        const loadFlg = ref(false);
		/**
         * @name 定义业务表单
         */
        const getInitFormData = () => {
            return {
                id: 0,
                linkman: '',
                memberId: 0,
                phoneNumber: '',
                detailAddress: '',
                postalCode: '',
                province: '',
                city: '',
                area: '',
                type: 0,
                strProvCityAreaCode: '',
                strProvCityArea: '',
            }
        };
		const memberIdOpt = ref([]);
		const memberIntelWayOpt = ref([]);
        let memberId =0;
        /**
         * @name 表单初始化
         */
        const resetMemberAddressForm = () => {
            Object.assign(memberAddressForm, getInitFormData());
            memberAddressForm['memberId'] = memberId;
        };
		const memberAddressForm = reactive(getInitFormData());
		const memberAddressFormRef = ref(null);
        const memberAddressFormRules = {
            linkman: [
                { required: true, message: "请输入联系人姓名", trigger: "blur" },
            ],
            phoneNumber: [
                { required: true, message: "请输入联系人手机号", trigger: "blur" },
            ],
        };
        // =========================================================================================
        const provinceOptionVal = ref('');
		const provinceOptions = ref([]);
        const provinceOptionProps = {
            checkStrictly: true,
        }
		const func_loadProvinceOptions = () => {
			loadProvTrees().then((res) => {
				provinceOptions.value = res.data;
			});
		};
		const func_setProvince = () => {
            memberAddressForm['strProvCityAreaCode'] = provinceOptionVal.value.join(',');
		};
        // =========================================================================================
		// 主业务处理 ========================================================================================= START
        // 提交
        const func_onSubmit = () => {
            // 表单校验
            memberAddressFormRef.value.validate((valid) => {
                if (valid) {
                    if(loadFlg.value){
                        saveMemberAddress(memberAddressForm).then((res) => {
							if(res.code != 200) {
								ElMessage.error(res.message);
							} else {
								resetMemberAddressForm();
								ElMessage.success(SUCCESS_EDITDATA_DIALOG_MESSAGE);
								cex.emit('MemberAddressData', {state: 1, load: false, data: []});
							}
						});
                    } else {
                        addMemberAddress(memberAddressForm).then((res) => {
							if(res.code != 200) {
								ElMessage.error(res.message);
							} else {
								resetMemberAddressForm();
								ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);
								cex.emit('MemberAddressData', {state: 1, load: false, data: []});
							}
						});
                    }
                } else {
                    return false;
                }
            });
        };
        // 重置
        const func_onReset = () => {
			resetMemberAddressForm();
        };
		const func_closeDialog = () => {
            cex.emit('MemberAddressData', {state: 1, data: []});
        };
        // 页面初始化
        const func_onload = (v) => {
			if(loadFlg.value){
				findMemberAddressInfoById(v).then((res) => {
					Object.keys(memberAddressForm).forEach((item) => {
                        memberAddressForm[item] = res.data[item];
                    });
                    provinceOptionVal.value = res.data['strProvCityArea'];
				});
			} else {
				resetMemberAddressForm();
			}
        }
		// 主业务处理 ========================================================================================= END
        watch(() => props.selectValue, (val) => {
            resetMemberAddressForm();
            let id = val['id'];
            loadFlg.value = val['load'];
            if(loadFlg.value) {
			    func_onload(id);
            }
            memberId = val['memberId'];
            memberAddressForm['memberId'] = val['memberId'];
        }, {deep: true,immediate: true});
        return {
            // 系统变量
			loadFlg, formLabelWidth, memberAddressFormRules, memberAddressFormRef, memberAddressForm,
            // =========================================================================================        
			resetMemberAddressForm, getInitFormData, func_onload, func_onSubmit, func_onReset, func_closeDialog,
            // =========================================================================================
            provinceOptions, provinceOptionProps, provinceOptionVal, func_setProvince, func_loadProvinceOptions,

        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 300px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.masterImage-uploader .masterImage {
  width: 100%;
  height: 100%;
  display: block;
  padding: 15px 15px 15px 15px
}
.masterImage-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.masterImage-uploader .el-upload:hover {
    border-color: #409EFF;
}
.masterImage-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
}
.masterImage {
    width: 100%;
    height: 100%;
    display: block;
    align: center;
}
</style>